<template>
    <div>
        <!-- This is Center page -->
        <p>Element-UI</p>
        <el-button type="danger">危险按钮</el-button>

        <el-radio v-model="radio" label="1">vue</el-radio>
        <el-radio v-model="radio" label="2">react</el-radio>

        <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>

        <el-alert title="成功提示的文案" type="success"></el-alert>

        <el-table v-loading="loading" :data="tableData" style="width: 100%;">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>

        <el-button :plain="true" @click="open1">错误</el-button>

        <el-button type="text" @click="open2">点击打开 Message Box</el-button>

        <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
            <el-button>下边</el-button>
        </el-tooltip>

        <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in 6" :key="item">
                <h3>{{ item }}</h3>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
export default {
    data() {
        return {
            radio: '1',
            value: true,
            tableData: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ],
            loading: false
        };
    },
    methods: {
        open1() {
            this.$message({
                message: '警告哦，这是一条警告消息',
                type: 'error'
            });
        },
        open2() {
            this.$alert('这是一段内容', '标题名称', {
                confirmButtonText: '确定',
                callback: (action) => {
                    this.$message({
                        type: 'success',
                        message: `action: ${action}`
                    });
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.item {
    margin: 4px;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>
